<template>
  <el-dialog
    :visible.sync="visible"
    center
    width="30%">
    <div>
    <el-form ref="form" :model="dataForm" label-width="100px">
      <el-form-item label="优惠券标题">
        <el-input v-model="dataForm.couponTitle" size="small"></el-input>
      </el-form-item>
      <el-form-item label="商品">
          <!-- <el-input  v-if="dataForm.flid" v-model="dataForm.prodName" placeholder="" :disabled="true" style="color:black"></el-input> -->
          <!-- <el-select v-if="!dataForm.flid" v-model="dataForm.prodId" placeholder="请选择">
              <el-option
              v-for="item in prodList"
              :key="item.index"
              :label="item.prodName"
              :value="item.prodId"
              :disabled="item.disabled">
              </el-option>
          </el-select>             -->
          <!-- {{dataForm.prodId}} -->

          
          <div v-if="!dataForm.couponId&&!prod">
              <div class="chosenBox" @click="enterChoseProd">
                  <div class="center">
                      <div class="border b1"></div>
                      <div class="border b2"></div>
                      <div class="border b3"></div>
                      <div class="border b4"></div>
                  </div>
              </div>
          </div>
          <div v-else class="prodBox">
              <span style="width:200px;margin:10px 0 0 10px">{{dataForm.prodName}}</span>
              <img :src="dataForm.pic" alt="" style="width:140px;border-radius:5px">
          </div>
      </el-form-item>


      <el-form-item label="券类型">
        <el-radio v-model="dataForm.couponType" label= 0>无门槛</el-radio>
        <el-radio v-model="dataForm.couponType" label= 1>满减</el-radio>
        <!-- {{dataForm.couponType}} -->
      </el-form-item>
      <el-form-item v-if="dataForm.couponType == 0" label="券额度">
        <el-input v-model="dataForm.fullAmountReduce" style="width:300px" size="small"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.couponType == 1" label="券额度">
        <div style="display:flex">
          满：<el-input v-model="dataForm.reduceMoney" placeholder="满" size="small" style="width:200px;margin-right:10px"></el-input>
          减：<el-input v-model="dataForm.fullAmountReduce" placeholder="减" size="small" style="width:200px"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker
          v-model="dataForm.dateTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="small"
          style="width:300px;">
        </el-date-picker>
      </el-form-item>
    </el-form>
    </div>
    <div slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>

    <!-- 选择商品 -->
    <el-dialog
        title=""
        :visible.sync="choseProdVisible"
        :close-on-click-modal="false"
        top="8vh"
        width="70%"
        center
        append-to-body>
        <div style="height:70vh;overflow:auto">
        <avue-crud ref="crud"
                :data="prodList"
                :option="tableOption">
            <template slot-scope="scop" slot="menu">
                <el-button size="medium"   type="normal" @click.stop="choseProd(scop.row)">确定</el-button>
            </template>                
        </avue-crud>            
        </div>
        <div style="height:20px" slot="footer">
        </div>
    </el-dialog>

    
  </el-dialog>
</template>

<script>
import { tableOption } from '@/crud/finance/prodList'

export default {
  data() {
    return {
      visible: false,
      choseProdVisible: false,
      tableOption: tableOption,
      prodList:[],
      prod:null,
      dataForm:{
        couponId: null,
        couponType: '0',
        fullAmountReduce:null,
      },
    }
  },

  methods:{
    init(row){
      this.prod = false
      if (row) {    
        this.dataForm.couponId = row.couponId
        this.dataForm = row
        this.dataForm.couponType = String(row.couponType)
        this.dataForm.dateTimeRange = [new Date(row.startTime),new Date(row.endTime)]
      }else{
        this.dataForm = {
          couponType: '0'
        }
        this.$http({
          url: this.$http.adornUrl("/coupon/coupon/couponShop"),
          method:'get'
        }).then(({data}) =>{
          // console.log(data);
          this.prodList = data            
        })                
      }
      this.visible = true
    },

    handleSubmit(){
      this.$http({
        url: this.$http.adornUrl('/coupon/coupon'),
        method: this.dataForm.couponId?'put':'post',
        data: this.$http.adornParams({
          couponId: this.dataForm.couponId,
          couponType: this.dataForm.couponType,
          couponTitle: this.dataForm.couponTitle,
          reduceMoney: this.dataForm.reduceMoney,
          fullAmountReduce: this.dataForm.fullAmountReduce,
          startTime:this.dataForm.dateTimeRange[0],
          endTime: this.dataForm.dateTimeRange[1],
          prodId: this.dataForm.prodId,
          //优惠券种类 couponKind
          //0： 单品优惠券
          //1： 店铺优惠券
          couponKind: 0,
        })
      }).then(({data}) => {
        this.visible = false
        this.$emit('refreshDataList')
      })
    },

    enterChoseProd(){
      this.choseProdVisible = true
        
    },

    choseProd(row){
      console.log(row);
      this.prod = true
      this.dataForm.prodId = row.prodId
      this.dataForm.pic = row.pic
      this.dataForm.prodName = row.prodName
      this.choseProdVisible = false
      
    }
    
  }
}
</script>

<style scoped>
.el-input{
  width: 300px;
}
.chosenBox{
    height: 148px;
    width: 148px;
    border: 1px dashed #C0CCDA;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8C939D;
    font-size: 48px;
    font-weight: 100;
    cursor: pointer;
}
.center{
    height: 26px;
    width: 26px;
    display: flex;
    flex-wrap: wrap;
}
.border{
    height: 13px;
    width: 13px;
    border: 1px solid white;
}
.b1,.b2{
    border-bottom: 1px solid #c0c0c0;
}
.b3,.b4{
    border-top: 1px solid #c0c0c0;
}
.b1,.b3{
    border-right: 1px solid #c0c0c0;
}
.b2,.b4{
    border-left: 1px solid #c0c0c0;
}

.prodBox{
    height: 140px;
    border: 1px solid #c0c0c0;
    width: 340px;
    border-radius: 5px;
    display: flex;
}
</style>